<template>
  <view class="page">
    <!-- 标题栏  start-->
    <fu-custom bgColor="bg-white" :isBack="true">
      <block slot="content"><text class="title">{{i18n['未到账金额']}}</text></block>
    </fu-custom>

    <!-- 充值明细列表 start -->
    <!-- <view class="top"></view> -->
    <view class="info_list_wrap">
      <view class="info_list_content">
      <view class="info_list" v-for="(item,index) in listData" :key="index">
        <view class="info_box">
          <view class="right-box flex justify-between align-center">
            <view>
              <view class="statue">{{i18n['状态']}}: <text class="padding-left-xs">{{item.status_text}} </text> </view>
              <text class="info_pb">{{item.create_time}}</text>
            </view>
            <view>
              <view class="info_pa_right" :class="item.t==1?'modes':'text-prices'">{{'+'+item.change_money}}</view>
            </view>
          </view>
        </view>
      </view>
      </view>
    </view>
    <!-- 充值明细列表 end -->


    <!-- 分页组件 start -->
    <fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
      :list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
    <!-- 分页组件 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  export default {
    mixins: [pagingList],
    data() {
      return {
        minixPagingListsApi: global.apiUrls.getMoneyFreeze, //明细请求地址
        pageingListApiMethod: "post", //请求方法
        listData:[]
      }
    },
    onLoad() {
    },
    methods: {
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          change_type:0
        }
      },
    },

  }
</script>

<style lang="scss">
  .modes {
    color: $fu-main-color !important;
  }
  .jianfu {
    color: $fu-type-error !important;
  }

  .top {
    width: 100%;
    height: 1rpx;
    border: 1px solid #EEEEEE;
  }

  // 充值明细列表 start
  .info_list_wrap{
    margin-top: 24rpx;

  }
  .info_list_content{
    border-radius: 16rpx;
    overflow: hidden;
     margin: 0 24rpx;
  }
  .info_list {
    width: 100%;
    // background: #FFFFFF;
    // margin-top: 24rpx;
    .info_box {

      display: flex;
      background: #FFFFFF;
      .right-box {
        margin:0 32rpx;
        padding: 32rpx 0;
        width: 100%;
        border-bottom: 1px #EEEEEE solid;
      }
      // 状态
       .statue{

         font-size: 32rpx;
         font-family: 'PingFang-SC-Regular';
         color: #333333;
         opacity: 1;

       }
      .info_pa {
        font-size: 32rpx;
        font-family: PingFang-SC-Regular;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .info_pb {
        padding-top: 32rpx;
        display: block;
        font-size: 24rpx;
        font-family: PingFang-SC-Regular;
        color: #BFBFBF;
      }

      .info_pa_right {
        text-align: right;
        font-size: 32rpx;
        font-family: 'Oswald';
        font-weight: 400;
        color: #FA2033;
      }
    }
  }

  // 充值明细列表 end
  // 规则弹窗 start
  .pop-content {
    width: 540rpx;
    height: 472rpx;
    border-radius: 24rpx;
    background: #ffffff;
  }

  .close-btn {
    width: 54rpx;
    height: 54rpx;
    background-color: rgba(255, 255, 255, 0.6);
  }

  // 规则弹窗 end
  .title{
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
